<template>
  <div class="cycle_view">
    <Jswitch
      :openText="openText"
      :closeText="closeText"
      :activeColor="activeColor"
      :status="status"
      @switchChange="switchChange"
    ></Jswitch>
    <Jswitch
      :openText="openText"
      :closeText="closeText"
      :activeColor="activeColor"
      :status="false"
      @switchChange="switchChange"
      style="margin-top: 20px"
    ></Jswitch>
  </div>
</template>

<script>
import Jswitch from "../components/3.x/switch.vue";
export default {
  components: {
    Jswitch,
  },
  data() {
    return {
      openText: "on",
      closeText: "off",
      activeColor: "red",
      status: true,
    };
  },
  computed: {
    rateText() {
      return this.rate + "%";
    },
  },
  watch: {
    rate(newval) {
      if (newval > 100) {
        this.rate = this.rate - 100;
      }
    },
  },
  methods: {
    switchChange(val) {
      console.log("按钮状态", val);
    },
  },
};
</script>

<style lang="less" scoped>
.cycle_view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>